<template>
  <div class="wrapper">
		<div class="header">群成员列表</div>
		<div class="content">
		<div class="search">
				<div class="text">
					<input id="search_Text" type="text" placeholder="根据账号添加群成员">
				</div>
				<span class="search_btn" ref="search_btn" ><img src="img/search_btn.png" alt=""></span>
			</div>
			<div class="list">
				
				<div class="list_wrapper" v-for="item in currentGroupMemberData">
					<div class="list_item2">
						<div class="list_item2_left"><img @click="goGroupMemberDetails(item.Member_Account, item.Part)" src="img/face_1.png" alt=""></div>
						<div class="list_item2_right">
							<span class="friend_name">【{{item.Role}}】{{item.Member_Account}}</span>
							<!-- <span class="friend_desc">一切就像是电影，比电影还要精彩</span> -->
						</div>
					</div>
				</div>
				<!-- <div class="list_wrapper">
					<div class="list_item2">
						<div class="list_item2_left"><img src="img/face.png" alt=""></div>
						<div class="list_item2_right">
							<span class="friend_name color_pink">【管理员】布兰妮</span>
							<span class="friend_desc">一切就像是电影，比电影还要精彩</span>
						</div>
					</div>
				</div> -->
				<!-- <div class="list_wrapper">
					<div class="list_item2">
						<div class="list_item2_left"><img src="img/face_1.png" alt=""></div>
						<div class="list_item2_right">
							<span class="friend_name">雪人兄弟</span>
							<span class="friend_desc">一切就像是电影，比电影还要精彩</span>
						</div>
					</div>
				</div> -->
				<!-- <div class="list_wrapper">
					<div class="list_item2">
						<div class="list_item2_left"><img src="img/face.png" alt=""></div>
						<div class="list_item2_right">
							<span class="friend_name color_pink">小甜甜</span>
							<span class="friend_desc">一切就像是电影，比电影还要精彩</span>
						</div>
					</div>
				</div> -->
			</div>
				
		</div>
	</div>
</template>
<script>
  import $ from 'jquery'
  import Client from '../../config/common'
  export default {
    data () {
      return {
        currentGroupId: null,
        loginInfo: {},
				currentGroupMemberData: {},
				groupType: ''
        
      }
    },
    created () {

      // 登录初始化
    	this.initLogin();
      
    },
    methods: {

      // 登录初始化
			initLogin() {
				Client.login(this.getLoginInfo);
			},

			// 获得登录成功信息
			getLoginInfo(loginInfo){
				// 将 登录信息保存在 vue的data里
				this.loginInfo = loginInfo;
				Client.log("登录成功获取登录信息-start");
				Client.log(loginInfo);
				Client.log("登录成功获取登录信息-end");

				// 初始化获取groupId 并且 验证是否存在groupId
				this.initGetGroupId();
        
        //获取当前群组成员
				this.getGroupMemberInfo(this.currentGroupId);
				
				// 跳转群组添加成员页面
				this.goGroupAddMemberFromFriends();
      },
      
      // 获取显示当前群组详情的groupId 
			initGetGroupId() {
				if(Client.getQueryString("currentGroupId")){
					this.currentGroupId = Client.getQueryString("currentGroupId");
				}
				// 如果群组详情页面没有groupId跳转回群组列表
				if(this.currentGroupId == -1){
					this.$router.push({path: '/groupList'})
					return;
				}
      },

      // 跳转群组成员详情
      goGroupMemberDetails(member_id, Part) {
					let currentMemberId = member_id;
					let currentMemberPart = Part;
					let currentGroupId = Client.getQueryString("currentGroupId");
					let loginPart = Client.getQueryString("loginPart");
					let groupType = Client.getQueryString("groupType");

					this.$router.push({path: '/groupMemberdetails', query:{currentMemberId, currentMemberPart, currentGroupId, loginPart, groupType}});

			},
			
			// 跳转群组添加成员页面
			goGroupAddMemberFromFriends(){
				let That = this;
				let groupType = Client.getQueryString("groupType");
					$(this.$refs.search_btn).on("click", function(){
						if(groupType != "Private"){
							return;
						}

						console.log(That.currentGroupId);
						if(That.currentGroupId){
							let currentGroupId = parseInt(That.currentGroupId);
							That.$router.push({path: '/GroupAddMemberFromFriends',query: { currentGroupId }});
						}
					})
			},
      
      // 获取当前群组成员
      getGroupMemberInfo(group_id) {
            // initGetGroupMemberTable([]);
            let That = this;
						var options = {
								'GroupId': group_id,
								'Offset': 0, // 必须从0开始
								'Limit': 20,
								'MemberInfoFilter': [
										'Account',
										'Role',
										'JoinTime',
										'LastSendMsgTime',
										'ShutUpUntil'
								]
						};
						webim.getGroupMemberInfo(
								options,
								function (resp) {
									console.log(resp);
										if (resp.MemberNum <= 0) {
												alert('该群组目前没有成员');
												return;
										}
										var data = [];
										var html = '';
										for (var i in resp.MemberList) {
												var account = resp.MemberList[i].Member_Account;
												var role = webim.Tool.groupRoleEn2Ch(resp.MemberList[i].Role);
												let part = resp.MemberList[i].Role;
												var join_time = webim.Tool.formatTimeStamp(resp.MemberList[i].JoinTime);
												var shut_up_until = webim.Tool.formatTimeStamp(resp.MemberList[i].ShutUpUntil);
												if (shut_up_until == 0) {
														shut_up_until = '-';
												}
												
												data.push({
														GId: group_id,
														GroupId:  webim.Tool.formatText2Html(group_id),
														Member_Account: webim.Tool.formatText2Html(account),
														Role: role,
														JoinTime: join_time,
														ShutUpUntil: shut_up_until,
														Part: part
                        });
                    }
                    That.currentGroupMemberData = data;
                    Client.log("群成员列表数据-start");
                    Client.log(That.currentGroupMemberData);
                    Client.log("群成员列表数据-start");

										// $('#get_group_member_table').bootstrapTable('load', data);
										// $('#get_group_member_dialog').modal('show');
								},
								function (err) {
										alert(err.ErrorInfo);
								}
						);
				},
      
    }
  }
  
</script>
<style lang="scss">
  @import '../../style/group_member_list';
</style>

